<template>
  <DetailLayout :bg-image="friendInfo?.bgImage!">
    <template #avatar>
      <!-- 头像 -->
      <div class="w-full px-4 flex flex-row items-center text-white gap-3">
        <img :src="friendInfo?.avatar" alt="" class="w-[90px] h-[90px] rounded-[50%]" />
        <!-- 基本信息 -->
        <div class="w-full">
          <p class="text-[22px] font-bold pt-[20px]">
            {{ friendInfo?.name }}
          </p>
          <div class="text-xs text-fontSecondary pt-[15px]">
            <component :is="Gender(friendInfo?.gender ?? '0')"></component>
            <el-divider direction="vertical" />
            <span>23</span>
            <el-divider direction="vertical" />
            <span>{{ FormatBirthDate(friendInfo?.birthdate ?? "") }}</span>
            <el-divider direction="vertical" />
            <span>现居住于 {{ friendInfo?.address }}</span>
          </div>
        </div>
      </div>
    </template>
    <template #content>
      <!-- 账号 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-beizhu mr-1"></span>
          账号：
        </div>
        <span>{{ friendInfo?.uuid }}</span>
      </div>
      <!-- 备注 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-beizhu mr-1"></span>
          备注：
        </div>
        <span>{{ friendInfo?.name }}</span>
      </div>
      <!-- 分组 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-fenzu mr-1"></span>
          分组：
        </div>
        <el-select
          v-model="friendInfo.groupId"
          placeholder="分组"
          size="small"
          style="width: 120px"
          @change="ConfirmChangeGroup"
        >
          <el-option v-for="item in cache.FriendGroupCache || []" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <!-- 个性签名 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-gexingqianming1 mr-1"></span>
          个性签名：
        </div>
        <p class="text-xs text-fontPlaceholde">{{ friendInfo?.sign }}</p>
      </div>
      <el-divider />
      <!-- 动态 -->
      <div class="flex flex-row gap-2">
        <div>
          <span class="iconfont icon-dongtai mr-1"></span>
          动态：
        </div>
        <div class="flex-1 flex flex-row gap-1">
          <div v-for="i in 3" :key="i">
            <n-avatar :size="64" />
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="text-center pt-[20px]">
        <el-button>语音通话</el-button>
        <el-button>视频通话</el-button>
        <el-button type="primary" @click="GoChat">发送消息</el-button>
      </div>
    </template>
  </DetailLayout>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { IFriendListItem } from "@/types/friend";
import { ChatType, MessageType } from "@/types/chat";
import { useChat } from "@/store/modules/chat";
import { useSession } from "@/store/modules/session";
import { useUser } from "@/store/modules/user";
import { useCache } from "@/store/modules/cache.ts";
import { ChangeFriendGroup } from "@/api/friend.ts";
import { FormatBirthDate } from "@/utils/time.ts";
import { Gender } from "@/utils/common.ts";
import { NAvatar } from "naive-ui";
import { ElMessage } from "element-plus";
import DetailLayout from "../components/DetailLayout.vue";

const cache = useCache();
const chat = useChat();
const session = useSession();
const router = useRouter();
const user = useUser();
let friendInfo = ref<IFriendListItem>({} as IFriendListItem);

const props = withDefaults(
  defineProps<{
    friendId: number;
  }>(),
  {},
);

// 点击进行聊天
async function GoChat() {
  const { name, avatar, id: toId, sessionId } = friendInfo.value;
  let commonParams = {
    name,
    avatar,
    sessionId,
    chatType: ChatType.friend,
  };
  await session.AddSession({
    ownerId: user.userId!,
    toId,
    sessionType: MessageType.text,
    content: "",
    unread: 0,
    ...commonParams,
  });
  chat.ChatObject = { id: toId, ...commonParams };
  await router.push("/message");
}

// 确认更新好友的分组
async function ConfirmChangeGroup(groupId: number) {
  let friendId = props.friendId;
  let res = await ChangeFriendGroup({ friendId, groupId });
  if (res?.status != 200) return;
  cache.UpdateFriendCacheByGroupId(friendId, groupId);
  ElMessage.success("更新成功");
}

watch(
  () => props.friendId,
  (newVal) => {
    if (!newVal) return;
    const info = cache.GetFriendInfo(newVal);
    friendInfo.value = info || ({} as IFriendListItem);
  },
  {
    immediate: true,
  },
);
</script>

<style lang="scss" scoped></style>
